<template>
   <div class="toast" v-show="isShow">
      <div>{{message}}</div>
   </div>
</template>

<script>
  export default {
    name: "Toast",
    data(){
      return {
        message:"",
        isShow:false,
      }
    },
    methods:{
      show(message,duration){
        console.log("=========");
        this.message=message
        this.isShow=true,
         setTimeout(()=>{
             this.message=""
            this.isShow=false
         },duration)
      }
    }
  }
</script>

<style scoped>
.toast{
  position: fixed;
  left: 50%;
  top: 50%;
   transform: translate(-50%,-50%);
   color: white;
  font-size: 20px;
  z-index: 99;
  background-color: #908b8b;
}
</style>
